<script setup lang="ts">
import TitleBar from "@/components/framework/titlebar.vue";
import { useEffect } from "@/framework/vue/hooks";
import hotkeys from "hotkeys-js";
import ThemeProvider from "@/framework/theme/theme-provider.vue";
import { defineAsyncComponent } from "vue";
import { notification } from "ant-design-vue";
import PageMain from "@/pages/main/index.vue";
import { appMenuItems } from "@/app.menus.ts";
import relativeTime from 'dayjs/plugin/relativeTime';
import dayjs from "dayjs";

dayjs.extend(relativeTime);

const AppBackgroud = defineAsyncComponent(() => import("@/components/background/app-backgroud.vue"));
const TitleBarExtra = defineAsyncComponent(() => import("@/components/app/title-bar-extra.vue"));
const SettingsModal = defineAsyncComponent(() => import("@/components/settings/settings-modal.vue"));

notification.config({
  placement: "bottomRight",
});

useEffect(() => {
  closeLoading();

  // F5刷新页面
  hotkeys("F5", () => location.reload());
  // F12打开开发者工具
  hotkeys("F12", () => native.ipc.send("window.devtools"));

  return () => {};
});
</script>

<template>
  <theme-provider>
    <app-backgroud />
    <title-bar :menu-items="appMenuItems">
      <template #right>
        <title-bar-extra />
      </template>
    </title-bar>
    <section class="app-content-container">
      <page-main />
    </section>
    <settings-modal />
  </theme-provider>
</template>

<style lang="less">
body {
  overflow: hidden;
}

#app {
  background-color: var(--color-bg-container);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.app-content-container {
  height: calc(100vh - var(--titlebar-height));
  overflow: hidden;
  font-size: 14px;
  position: relative;
}
</style>
